<template>
	<view class="add-group-warp" :style="{background: !showUpload ? '#f8f8f8;' : '#ffffff'}">
		<view class="description bg-white">
			发起后，您的组局将在活动所属类型中展示
		</view>
		<view class="form-wrap" v-show="!showUpload">
			<view class="add-image-wrap w100">
				<view class="default relative" v-if="!form.cover">
					<view class="upload-btn x-y-center text-center" @tap="handleJumpUpload">
						<text class="iconfontPT icontupian02 block"></text>
						<text class="text">上传图片</text>
					</view>
					<view class="waring">
						<text class="iconfontPT iconzhuyi"></text>
						将使用第一张图片作为封面
					</view>
				</view>
				<view class="exhibition relative w100" v-else @tap="handleJumpUpload">
					<image class="w100 h100" :src="host + form.cover" mode="aspectFill"></image>
					<view class="waring text-center">
						编辑图片
					</view>
				</view>
			</view>
			<view class="group-info bg-white">
				<view class="title">
					活动信息
				</view>
				<view class="form-item text-center">
					<label class="name">活动名称</label>
					<input class="text-center" placeholder="请填写" type="text" v-model="form.name" />
				</view>
				<view class="form-item text-center" @click="handleChooseLocation">
					<label class="name">活动地址</label>
					<view class="location">
						<view v-if="form.location" class="inline-block">
							<text class="" style="margin-left: 8rpx;">{{ form.location }}</text>
						</view>
						<view v-else class="inline-block">
							<text style="margin-left: 8rpx; color: #999999;">您的位置</text>
						</view>
					</view>
				</view>
				<view class="form-item text-center">
					<label class="name">活动人数</label>
					<input class="text-center" placeholder="请填写" type="digit" v-model="form.personNumber" />
				</view>
				<view class="form-item text-center">
					<label class="name">人均经费(元/人)</label>
					<input class="text-center" placeholder="请填写" type="digit" v-model="form.funds" />
				</view>
				<view class="form-item text-center">
					<label class="name block">报名截止时间</label>
					<myDatePicker class="my-date-picker" placeholder='请选择' :defaultSelect='false' @pickerChange="handleEnrollEndDateChange"></myDatePicker>
				</view>
				<view class="form-item text-center flex-x-center last relative">
					<view class="left">
						<label class="name block">活动开始时间</label>
						<myDatePicker class="my-date-picker" placeholder='请选择' :defaultSelect='false' @pickerChange="handleStartDateChange"></myDatePicker>
					</view>
					<view class="right">
						<label class="name block">活动结束时间</label>
						<myDatePicker class="my-date-picker" placeholder='请选择' :defaultSelect='false' @pickerChange="handleEndDateChange"></myDatePicker>
					</view>
				</view>
			</view>
			<view class="group-introduce bg-white">
				<view class="title">
					<view>活动介绍</view>
					<view class="tips">
						<view class="tips-text">	活动发起者应保证活动不触犯法律法规和道德底线;发起者同时保证活动真实有效，如有变动务必提前和参与者沟通;发起者自愿承担所发起活动带来的一切后果</view>
					</view>
				</view>
				<textarea class="textarea w100" placeholder="请填写活动介绍" :maxlength="maxlength" v-model="form.introduce"></textarea>
				<u-checkbox-group class="pact-list">
					<u-checkbox v-model="readChecked" shape="circle">
						<view class="pact-list__text">我已阅读并同意 <navigator class="pact-list__link" url="/pages/used-car/xieyi?type=1">《车一转共享平台服务使用协议》</navigator></view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<cover-view class="confirm-warp w100 bg-white">
			<button type="warn" @click="handleSubmit">发起组局</button>
		</cover-view>
		<image-compress style="position: absolute; top: 0rpx; overflow: hidden;" ref='imageCompress' />
	</view>
</template>

<script>
	import myDatePicker from '../../components/public/my-date-picker.vue'
	import {
		addGroup
	} from '../../../apis/life-circle/index.js';
	import myRandom from '../../../utils/random-string.js'

	export default {
		data() {
			return {
				readChecked:false,
				showUpload: false,
				groupTypeName: '',
				groupTypeId: 0,
				latitude: '',
				longitude: '',
				form: {
					cover: '',
					name: '',
					funds: '',
					photos: [],
					endDate: '',
					location: '',
					startDate: '',
					introduce: '',
					personNumber: '',
					enrollEndDate: '',
				},
				rules: {
					cover: [{
						required: true,
						message: '请上传封面',
					}],
					name: [{
						required: true,
						message: '请输入活动名称',
					}],
					location: [{
						required: true,
						message: '请选择活动地址',
					}],
					personNumber: [{
							required: true,
							message: '请填写活动人数',
						},
						{
							min: 1,
							max: 8,
							message: '请填写活动人数',
						},
						{
							intNumber: true,
							message: '请填写正确的活动人数',
						}
					],
					funds: [{
							required: true,
							message: '请填写人均经费',
						},
						{
							min: 1,
							max: 8,
							message: '请填写人均经费',
						},
						{
							intNumber: true,
							message: '请填写正确的人均经费',
						}
					],
					enrollEndDate: [{
						required: true,
						message: '请选择报名截止时间',
					}],
					startDate: [{
						required: true,
						message: '请选择活动开始时间',
					}],
					endDate: [{
						required: true,
						message: '请选择活动结束时间',
					}],
					introduce: [{
							required: true,
							message: '请填写活动介绍',
						},
						{
							min: 2,
							max: 200,
							message: '活动介绍字符长度在 2 到 200 个字符',
						}
					]
				}
			}
		},
		computed:{
			host(){
				return this.$baseHost.car
			}
		},
		onLoad(options) {
			this.groupTypeName = options.groupTypeName
			this.groupTypeId = options.groupTypeId
			uni.setNavigationBarTitle({
				title: `发起${options.groupTypeName}组局`
			})
		},
		onShow(){
			const data = uni.getStorageSync('group-upload-data')
			if(data){
				this.form.cover = data.poster
				this.form.photos = data.photos
			}
		},
		onUnload(){
			uni.removeStorage({key:'group-upload-data'})
		},
		components: {
			myDatePicker
		},
		methods: {
			handleJumpUpload(){
				uni.navigateTo({
				    url: '/pages/life-circle/group-upload/index',
					success:()=> uni.$emit('add-group',{poster:this.form.cover,photos:this.form.photos})
				})
			},
			handleStartDateChange(startDate) {
				this.form.startDate = startDate
			},
			handleEndDateChange(endDate) {
				this.form.endDate = endDate
			},
			handleEnrollEndDateChange(enrollEndDate) {
				this.form.enrollEndDate = enrollEndDate
			},
			handleChooseLocation() {
				let _this = this;
				uni.chooseLocation({
					success: res => {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.form.location = res.address
					},
				})
			},
			handleSubmit() {
				this.form.photos.unshift(this.form.cover);

				let _this = this,
					params = {
						class_id: this.groupTypeId,
						title: this.form.name,
						introduce: this.form.introduce,
						img: this.form.photos.join(','),
						total: this.form.personNumber,
						per_capita: this.form.funds,
						longitude: this.longitude,
						latitude: this.latitude,
						address: this.form.location,
						sign_up_time: this.form.enrollEndDate,
						s_time: this.form.startDate,
						e_time: this.form.endDate,
						factory_id: 1,
					};

				this.$verification(this.form, this.rules, ok => {
					if (ok) {
						if(!/^[1-9]\d*$/.test(this.form.personNumber)){
							return uni.showModal({
								title: '提示',
								content: '请正确输入活动人数！'
							});
						}
						if (this.$moment(this.form.startDate).isAfter(this.form.endDate)) {
							return uni.showModal({
								title: '提示',
								content: '活动开始时间应该在活动结束时间之前!'
							});
						}

						if (this.$moment(this.form.startDate).isSame(this.form.endDate)) {
							return uni.showModal({
								title: '提示',
								content: '活动开始时间不能与活动结束时间相同!'
							});
						}

						if (this.$moment(this.form.enrollEndDate).isAfter(this.form.endDate)) {
							return uni.showModal({
								title: '提示',
								content: '报名截止时间应该在活动结束时间之前!'
							});
						}
						
						if(!this.readChecked){
							return uni.showModal({
								title: '提示',
								content: '请阅读并同意协议!'
							});
						}
						
						_this.$loading.show()

						const groupID = myRandom(6) || undefined
						console.log({
							type: uni.TIM.TYPES.GRP_CHATROOM,
							groupID,
							avatar: _this.form.cover,
							maxMemberCount: params.total,
							name: params.title,
						})
						uni.$Tim.createGroup({
							type: uni.TIM.TYPES.GRP_CHATROOM,
							groupID,
							avatar: _this.form.cover,
							maxMemberCount: params.total,
							name: params.title,
						}).then(() => {
							params.GroupId = groupID
							addGroup(params).then(res => {
								if (+res.code === 200) {
									_this.loading = true
									uni.showToast({
										title: '操作成功！',
										icon: 'success',
										duration: 500,
									});
									uni.navigateBack({
										delta: 1
									})
								}
							})

						}).then(() => {
							_this.$loading.hide()
							uni.showToast({
								title: '操作成功！',
								icon: 'success',
								duration: 500,
							});
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.add-group-warp {
		border-top: 1rpx solid rgba(204, 204, 204, .5);
		padding-bottom: 150rpx;

		.description {
			font-size: 26rpx;
			padding: 15rpx 0 15rpx 30rpx;
		}

		.form-wrap {

			.add-image-wrap {
				.default {
					height: 460rpx;
					background: url('http://cdn1.cheyizhuan.com/common/active.png-t.m90xx');
					background-size: cover;

					.upload-btn {
						background: #FF9187;
						border-radius: 100%;
						width: 178rpx;
						height: 178rpx;
						border: 3rpx solid #ffffff;
						color: #ffffff;
						padding-top: 26px;
						box-sizing: border-box;
						font-size: 26rpx;

						.iconfontPT {
							color: #ffffff;
							margin-bottom: 10rpx;
						}
					}

					.waring {
						position: absolute;
						right: 50rpx;
						bottom: 20rpx;
						font-size: 24rpx;
						color: #666666;
					}
				}

				.exhibition {
					height: 460rpx;

					.waring {
						position: absolute;
						right: 35rpx;
						bottom: 35rpx;
						font-size: 24rpx;
						color: #ffffff;
						background: rgba(0, 0, 0, 0.5);
						padding: 10rpx 20rpx;
						border-radius: 5rpx;
					}
				}
			}

			.form-item {
				border-top: 1rpx solid rgba(204, 204, 204, .5);
				padding: 20rpx 0 25rpx 0;

				&.last::after {
					position: absolute;
					top: 50%;
					right: 50%;
					transform: translate(-50%, -50%);
					content: '';
					width: 1rpx;
					height: 65%;
					background: rgba(204, 204, 204, .5);
				}

				input,
				.my-date-picker,
				.location {
					color: #999999;
				}

				.name {
					padding-bottom: 10rpx;
				}

				.left,
				.right {
					width: 50%;
				}
			}

			.group-info {
				margin-top: 25rpx;
				padding: 30rpx 30rpx 0 30rpx;

				.title {
					padding-bottom: 15rpx;
				}

			}

			.group-introduce {
				margin-top: 25rpx;
				padding: 30rpx;
				.title {
					border-bottom: 1rpx solid rgba(204, 204, 204, .5);
					padding-bottom: 15rpx;
					display: flex;
					align-items: center;
					white-space:nowrap;
					.tips{
						overflow: hidden;
						margin-left: 20rpx;
					}
					.tips-text{
						font-size: 24rpx;
						color: #999999;
						white-space:nowrap;
						animation: shiftLeft linear 30s infinite;
					}
				}
				.textarea {
					padding-top: 15rpx;
					z-index: 111;
				}
			}
		}
		
		@keyframes shiftLeft
		{
			from {
				transform: translateX(100%);
			}
			to{
				transform: translateX(-300%);
			}
		}
		
		.upload-wrap {
			padding: 0 20rpx;

			.cover-image-wrap {
				margin-bottom: 30rpx;
				background: #f8f8f8;
				height: 388rpx;

				.image-item {
					.replace {
						z-index: 2;
						width: 170rpx;
						height: 100rpx;
						color: #ffffff;
						border-radius: 5%;
						background: rgba(0, 0, 0, 0.2);
						text-align: center;
						line-height: 100rpx;
						font-size: 30rpx;
					}
				}
			}

			.image-wrap {
				.image-item {
					width: 340rpx;
					height: 191rpx;

					&::after {
						position: absolute;
						top: 0;
						left: 0;
						content: '';
						width: 100%;
						height: 100%;
						display: inline-block;
						background: rgba(0, 0, 0, .5);
						z-index: 1;
					}

					.delete {
						z-index: 2;
						position: absolute;
						left: 85%;
						top: 10%;
					}
				}

				.choose-image {
					width: 340rpx;
					height: 191rpx;
					background: #f8f8f8;

					.text {
						font-size: 24rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}

		.confirm-warp {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 15rpx 40rpx 60rpx 40rpx;
			box-sizing: border-box;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			z-index: 112;
		}
	}
	
	.pact-list{
		&__text{
			display: flex;
			font-size: 24rpx;
			color: #808080;
		}
		&__link{
			color: #0083F0;
		}
	}
</style>
